<template>
	<view class="client-content">
		<!-- <yk-header :title="title" @headBtn="headBtn()" @closePage="closePage()"></yk-header> -->
		<page-head class="yk">
			<slot slot="title">
				<view class="title-box"> {{ title.length > 10 ? title.substr(0, 10) + '...' : title }}</view>
			</slot>
			<slot slot="right">
				<view class="head-search" @click="searchBox()"><image src="../../static/img/zhanye/csearch.png" mode="aspectFill"></image></view>
				<view class="head-search-input" v-if="searchShow">
					<input type="text" v-model="searchName" value="" placeholder="请输入客户的手机/备注" />
					<view @click="searchClient()">搜索</view>
				</view>
			</slot>
		</page-head>
		<view class="head-select">
			<view class="client-select"  @click="openClient()">{{myClient==2?"全部客户":(myClient==0?"未关注客户":"关注客户")}} <view v-if="competence" class="balance-desc"></view></view>
			<view class="balance" @click="sortChange($event)">余额
				<view class="balance-triangle">
					<view class="balance-asc" :class="[sortIndex == 1 ? 'asc' : '']"></view>
					<view class="balance-desc" :class="[sortIndex == 1 ? 'desc' : '']"></view>
				</view>
			</view>
			<cover-view class="client-tab" v-if='selectopen'>
				<cover-image src="../../static/img/zhanye/white.png" mode=""></cover-image>
				<cover-view class="client-tab-box">
					<cover-view data-client="2" @click="selectClient($event)" :class="[myClient==2?'active':'']">全部客户
						<cover-image v-if='myClient==2' src="../../static/img/zhanye/dui.png" mode=""></cover-image>
					</cover-view>
					<cover-view data-client="1" @click="selectClient($event)" :class="[myClient==1?'active':'']">关注客户
						<cover-image v-if='myClient==1' src="../../static/img/zhanye/dui.png" mode=""></cover-image>
					</cover-view>
					<cover-view data-client="0" @click="selectClient($event)" :class="[myClient==0?'active':'']">未关注客户
						<cover-image v-if='myClient==0' src="../../static/img/zhanye/dui.png" mode=""></cover-image>
					</cover-view>
				</cover-view>
			</cover-view>
		</view>
		<view class="client-list">
			<view class="client-list-box"
				v-for="(customer, index) in customerList"
				:key="index"
			>
				<view class="client-box-msg">
					{{customer.customer_phone}}
					<view class="client-box-money">余额 <text> {{customer.amount}} </text> 元</view>
				</view>
				<view class="client-box-name"
					@click="openModel($event)"
					:data-cid='customer.customer_id'
					:data-remarks='customer.remarks_name?customer.remarks_name:""'
				>
					<view>{{customer.remarks_name?customer.remarks_name:customer.user_name}}</view>
					<!-- <image src="../../static/img/zhanye/edit.png" mode="widthFix"></image>
					*  -->
					<text>备注</text>
				</view>
				<view class="client-box-number">
					已激活卡数量{{customer.cou}}张
					<view class="client-box-attention" 
						:class="[customer.is_attention==1?'active':'']"
						:data-cid='customer.customer_id'
						:data-status='customer.is_attention==1?"0":"1"'
						:data-index='index'
						@click="attentionClient($event)"
					>{{customer.is_attention==1?"已关注":"关注"}}</view>
					<view class="client-box-sendbtn"
						:class="[customer.ascriptionStatus==0?'active':'']"
						:data-cid='customer.customer_id'
						:data-type='customer.ascriptionStatus'
						:data-moblie='customer.customer_phone'
						@click='sendCoupon($event)'
					>发券</view>
				</view>
			</view>
			
			<!-- <view class="client-list-box">
				<view class="client-box-msg">
					18876288656
					<view class="client-box-money">余额 <text> 23234 </text> 元</view>
				</view>
				<view class="client-box-name">
					<view>位的我去额</view>
					<image src="../../static/img/zhanye/edit.png" mode="widthFix"></image>
				</view>
				<view class="client-box-number">
					已激活卡数量1张
					<view class="client-box-attention">关注</view>
					<view class="client-box-sendbtn">发券</view>
				</view>
			</view> -->
			
		</view>
		
		<view class="loading-text" v-if="customerList.length>10||customerList.length<1">{{ loadingText }}</view>
		
		<view class="remarks-model" v-if="modelopen">
			<view class="remarks-box">
				<input type="text" value="" maxlength="12" v-model="remarks" placeholder="请输入备注名"/>
				<view>
					<view @click="openModel()">取消</view>
					<view @click="editRemarks()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let page = 1,
		limit = 10;
	export default {
		data() {
			return {
				customerList: [],
				loadingText: '加载中...',
				sortIndex: 1,
				sort:'ASC',
				modelopen:false,
				selectopen:false,
				clientid:'',
				myClient:2,
				remarks:'',
				competence:false,
				once:'',
				searchShow:false,
				title:'我的客户',
				searchName:''
			};
		},
		onLoad(event) {
			
		},
		onShow() {
			page = 1;
			limit = 10;
			this.customerList = [];
			this.loadingText = '加载中...';
			// console.log(this.myClient);
			this.getcustomerList();
		},
		onReachBottom: function() {
			this.getcustomerList();
		},
		onPullDownRefresh: function() {
			page = 1;
			limit = 10;
			this.customerList = [];
			this.loadingText = '加载中...';
			this.getcustomerList();
		},
		methods: {
			//顶部功能键
			headBtn(e){
				let that=this;
				uni.showActionSheet({
					itemList: ['刷新', '清除缓存'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if(res.tapIndex==0){
							//刷新
							page = 1;
							limit = 10;
							that.customerList = [];
							that.loadingText = '加载中...';
							that.getcustomerList();
						}else{
							//清楚缓存
							// callNative('onClearH5Cache')
							uni.showToast({
								title: '清除缓存成功'
							});
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			//关闭当前页面
			closePage(){
				callNative('navigateBack') 
			},
			//搜索盒子显示
			searchBox(){
				if(this.searchShow){
					this.searchShow=false
				}else{
					this.searchShow=true
				}
			},
			//搜索
			searchClient(){
				console.log(this.searchName);
				this.searchBox();
				page = 1;
				this.customerList = [];
				this.getcustomerList();
			},
			//客户筛选
			selectClient(e){
				if(e.currentTarget.dataset.client==this.myClient){
					this.myClient=2;
				}else{
					this.myClient=e.currentTarget.dataset.client
				}
				page=1;
				this.customerList = [];
				this.selectopen=false;
				this.getcustomerList();
			},
			//开启客户筛选
			openClient(e){
				// if(!this.competence){
				// 	return
				// }
				if(this.selectopen){
					this.selectopen=false;
				}else{
					this.selectopen=true;
				}
			},
			//开启关闭弹窗
			openModel(e){
				if(this.modelopen){
					this.modelopen=false;
					this.remarks='';
				}else{
					this.modelopen=true;
					this.clientid=e.currentTarget.dataset.cid;
					this.remarks=e.currentTarget.dataset.remarks;
					if(this.remarks==''){
						this.once=0
					}else{
						this.once=1
					}
				}
			},
			//关注和取消关注
			attentionClient(e){
				try {
					// console.log('getcustomerList === ' + uni.getStorageSync('token'));
					console.log(e.currentTarget.dataset.cid);
					console.log(e.currentTarget.dataset.status);  
					console.log(e.currentTarget.dataset.index);  
					uni.request({
						url: this.$usereq + '/coupon-expand/rechargeable/countdeduction/focus',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: {
							customerId: e.currentTarget.dataset.cid,
							focusStatus:e.currentTarget.dataset.status
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							if(datas.code==200){
								uni.showToast({
									title: datas.data.focusMsg,
									icon:'success',
									duration: 2000
								});
								this.customerList[e.currentTarget.dataset.index].is_attention=datas.data.focusStatus
							}else{
								uni.showToast({
									title: datas.msg,
									icon:'success',
									duration: 2000
								});
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					uni.hideLoading();
					console.log(e.message);
				}
			},
			//修改备注
			editRemarks(e){
				try {
					let that=this;
					if(this.remarks==''){
						uni.showToast({
							title: '备注不能为空',
							icon:'none',
							duration: 2000
						});
						return
					}
					console.log(this.once);
					if(this.once==0){
						uni.request({
							url: this.$usereq + '/coupon-expand/customer/customerremarks/save',
							method: 'POST',
							header: {
								'blade-auth': decodeURI(uni.getStorageSync('token')),
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								customerId:this.clientid,
								remarksName:this.remarks
							},
							success: res => {
								let datas = res;
								if(datas.data.code==200){
									uni.showToast({
										title: '提交成功',
										icon:'success',
										duration: 2000
									});
									setTimeout(function(){
										page = 1;
										limit = 10;
										that.customerList = [];
										that.loadingText = '加载中...';
										that.getcustomerList();
										that.openModel()
									},2000)
								}else{
									uni.showToast({
										title: datas.data.msg,
										icon:'none',
										duration: 2000
									});
								}
								console.log(datas);
								uni.stopPullDownRefresh();
							}
						});
					}else{
						uni.request({
							url: this.$usereq + '/coupon-expand/customer/customerremarks/update',
							method: 'POST',
							header: {
								'blade-auth': decodeURI(uni.getStorageSync('token')),
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								customerId:this.clientid,
								remarksName:this.remarks
							},
							success: res => {
								let datas = res;
								if(datas.data.code==200){
									uni.showToast({
										title: '提交成功',
										icon:'success',
										duration: 2000
									});
									setTimeout(function(){
										page = 1;
										limit = 10;
										that.customerList = [];
										that.loadingText = '加载中...';
										that.getcustomerList();
										that.openModel()
									},2000)
								}else{
									uni.showToast({
										title: datas.msg,
										icon:'none',
										duration: 2000
										
									});
								}
								console.log(datas);
								uni.stopPullDownRefresh();
							}
						});
					}
				} catch (e) {
					console.log(e.message);
				}
			},
			sendCoupon:function(e){
				if(e.currentTarget.dataset.type==0){
					return
				}
				h5NavigateTo({
					url: 'sendCoupon?customerId='+e.currentTarget.dataset.cid+'&moblie='+e.currentTarget.dataset.moblie
				});
			},
			sortChange: function(e) {
				// this.loadingText = '加载中...';
				if (this.sort == 'ASC') {
					this.sort = 'DESC';
					this.sortIndex=2;
				} else {
					this.sort = 'ASC'
					this.sortIndex=1;
				}
				page = 1;
				this.customerList = [];
				this.getcustomerList();
			},
			getcustomerList() {
				try {
					// console.log('getcustomerList === ' + uni.getStorageSync('token'));
					console.log(this.myClient);  
					uni.request({
						url: this.$usereq + '/coupon-expand/promote/bind/query/customer',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: {
							page: page,
							pageSize: limit,
							sortField:'amount',
							focusStatus:this.myClient==2?"":this.myClient,
							searchName:this.searchName,
							sortType:this.sort
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							let newList = '';
							if(datas.data.length>1){
								this.competence=true
							}
							console.log(this.competence);
							newList=datas.data;
							// if(this.myClient==2){
							// 	newList = datas.data[0];
							// }else if(this.myClient==0){
							// 	newList = datas.data[1];
							// }else{
							// 	newList = datas.data[2];
							// }
							if(newList!=undefined){
								if (newList != '' && newList.length > 0 ) {
									this.customerList = this.customerList.concat(newList);
									page++;
									console.log(page);
									if (newList.length < 10) {
										this.loadingText = '没有更多了';
									}
								} else {
									this.loadingText = '没有更多了';
								}
							}else{
								this.loadingText = '没有更多了';
							}
							
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					uni.hideLoading();
					this.loadingText = '没有更多了';
					console.log(e.message);
				}
			},
		}
	};
</script>

<style lang="scss">
	.head-search{
		width: 40px;
		height: 40px;
		image{
			width: 40px;
			height: 40px;
		}
	}
	.head-search-input{
		position: absolute;
		width: 640px;
		background: #fff;
		top: -10px;
		right: 0px;
		input{
			display: block;
			background: #f2f2f2;
			height: 60px;
			line-height: 60px;
			width: 540px;
			float: left;
			padding: 0 20px;
			box-sizing: border-box;
		}
		view{
			float: left;
			width: 100px;
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	}
	.head-select{
		line-height: 90px;
		height: 90px;
		padding: 0 20px;
		background: #fff;
		box-sizing: border-box;
		position: relative;
		.client-select{
			float: left;
			position: relative;
			font-size: 28px;
			color: #0096FF;
			.balance-desc{
				float: right;
				margin-top: 35px;
				margin-left: 10px;
				// margin-top: 8px;
				border-left: 12px solid transparent;
				border-right: 12px solid transparent;
				border-top: 16px solid #0096FF;
			}
		}
		.balance{
			// float: left;
			float: right;
			width: 110px;
			font-size:28px;
			font-weight:bold;
			color:rgba(0,150,255,1);
			line-height:80px;
			height: 80px;
			// padding: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.balance-triangle{
				float: left;
				position: relative;
				top: 22px;
				height: 34px;
				width: 24px;
				.balance-asc{
					width: 0;
					height: 0;
					border-left: 12px solid transparent;
					border-right: 12px solid transparent;
					border-bottom: 16px solid #BFBFBF;
				}
				.balance-desc{
					width: 0;
					height: 0;
					margin-top: 4px;
					border-left: 12px solid transparent;
					border-right: 12px solid transparent;
					border-top: 16px solid #0096FF;
				}
			}
		}
		.client-tab{
			background: #fff;
			position: absolute;
			width: 100%;
			top: 90px;
			left: 0px;
			box-shadow: 0 0 10px #eee;
			// border-radius: 10px;
			cover-image{
				width: 100%;
				height: 270px;
			}
			.client-tab-box{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				cover-view{
					padding: 0 20px;
					box-sizing: border-box;
					line-height: 90px;
					height: 90px;
					cover-image{
						float: right;
						width: 40px;
						height: 40px;
						margin-top: 25px;
					}
				}
				cover-view.active{
					color: #0096FF;
				}
			}
			
		}
	}
	.client-content{
		width: 100%;
		min-width: 750px;
		color: rgba(31,31,31,1);
		font-size:30px;
		background: #F3F3F3;
	}
	.asc{
		border-bottom: 16px solid #0096FF !important;
	}
	.desc{
		border-top: 16px solid #BFBFBF !important;
	}
	.client-list{
		margin-top: 30px;
		padding: 0 20px;
		.client-list-box{
			width: 100%;  
			background: #fff;
			border-radius: 10px;
			margin-bottom: 30px;
			padding: 20px 20px 0 20px;
			box-sizing: border-box;
			.client-box-msg{
				width: 100%;
				box-sizing: border-box; 
				height: 40px;
				line-height: 40px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.client-box-money{
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					font-size: 24px;
					text{
						color:rgba(0,150,255,1);
						display: inline-block;
						margin-left: 10px; 
					}
				}
			}
			.client-box-name{
				width: 100%;
				display: flex;
				height: 50px;
				padding-bottom: 10px;
				line-height: 50px;
				font-size: 24px;
				flex-direction: row;
				border-bottom: 1px solid #F3F3F3;
				color: #909090;
				view{
					min-width: 180px;
				}
				image{
					width: 28px;
					margin-left: 10px;
					margin-top: 8px;
				}
			}
			.client-box-number{
				height:80px;
				line-height: 80px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				color: #FF9000;
				font-size: 24px;
				.client-box-sendbtn{
					display: flex;
					flex-direction: row;
					justify-content: center;    
					color: #fff;
					width:128px;
					height:54px;
					line-height: 54px;
					margin-top: 13px;
					background:rgba(0,150,255,1);
					border-radius:27px;
				}
				.client-box-sendbtn.active{
					background: #BFBFBF;
				}
				.client-box-attention{
					display: flex;
					flex-direction: row;
					justify-content: center;
					margin-left: 150px;
					width:128px;
					height:54px;
					line-height: 54px;
					margin-top: 13px;
					border: 1px solid #0096FF;
					color: #0096FF;
					
					border-radius:27px;
				}
				.client-box-attention.active{
					border: 1px solid #bbb;
					color: #bbb;
				}
			}
		}
	}
	.loading-text {
		// width: 700px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		line-height: 60px;
		color: #979797;
		font-size: 24px;
	}
	.remarks-model{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
		.remarks-box{
			background: #fff;
			width: 624px;
			height: 300px;
			margin: 0 auto;
			margin-top: 500px;
			border-radius: 10px;
			padding: 40px 30px;
			box-sizing: border-box;
			input{
				display: block;
				height: 100px;
				line-height: 60px;
				padding: 0px 20px;
				box-sizing: border-box;
				border: 1px solid #ddd;
				border-radius: 10px;
				margin-bottom: 30px;
			}
			view{
				view{
					width: 270px;
					height: 90px;
					line-height: 90px;
					border-radius: 90px;
					overflow: hidden;
					text-align: center;
				}
				view:nth-child(1){
					border: 1px solid #ddd;
					color: #999;
					float: left;
				}
				view:nth-child(2){
					background: #0096FF;
					color: #fff;
					float: right;
				}
			}
		}
	}
</style>
